<!-- 业务解除文件 组件 -->
<template>
  <div class="bt-con">
    <a-carousel ref="bt-carousel" :after-change="onChange">
      <div class="radio-group-con" >
        <a-radio-group v-model="btType" >
          <a-radio :value="1">上传通知函 </a-radio>
          <a-radio :value="2">上传业务解除协议</a-radio>
        </a-radio-group>
        <a-button type="primary" :disabled="false" @click="gotoSide()" style="margin: 5px; width: 300px;">下一步<a-icon type="right" /></a-button>
      </div>
      <div  >
        <p-UpLoadFile :showHelp="true" v-model="UpLoadFileConfig.value" :customRequestEvent="PUpLoadFileCustomRequestEvent" :config="UpLoadFileConfig.config" :extendedFileVerification="UpLoadFileConfig.extendedFileVerification"></p-UpLoadFile>
        <a-button type="primary" ghost icon="left" :disabled="false" @click="gotoSide(0)" style="margin: 30px 5px;width: 300px;">返回重新选择业务解除文件</a-button>
      </div>
      <div >
        <!-- <AgreeContractZj :event="setValue"></AgreeContractZj> -->
        <a-button type="primary" ghost icon="left" :disabled="false" @click="gotoSide(0)" style="margin: 5px;width: 300px;">返回重新选择业务解除文件</a-button>
      </div>
    </a-carousel>


  </div>
</template>

<script>
// import AgreeContractZj from '@/views/agreeContract/agreeContractZj.vue'
const extendedFileVerification=[{ 'groupName':'合同专用', suffixArr:['jpg','jpeg','png','pdf','doc','docx','xls','xlsx','zip','rar'],errorMsg:'只允许上传 jpg,jpeg,png,pdf,doc,docx,xls,xlsx,zip,rar类型文件' }]

const upLoadConfig = ()=>{
  return {
    // 此参数必填  上传路径
    dir: "/user/contract/",
    // 身份证  all   ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
    model: "单文件",
    // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
    showBG: false,
    // 此参数选填  表示是否可编辑
    readonly: false,
    // 提示信息
    tips:{
      card1: '请上传通知函'
    },
    // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
    // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
    // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
    required: true,
    // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
    defaultFileList: {
      card1: {}
    },
    // 此参数集必填
    fielConfig: {
      // 允许上传的文件类型 当为空时表示不限制  默认为空
      //    可供选择类型：
      //          图片('jpg', 'png', 'jpeg')
      //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
      //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
      //          PDF(pdf)
      //          委托代征协议('pdf','jpg', 'png', 'jpeg')
      //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
      // eg:
      //    当值为string类型时，对所有（card1,card2,card3）的有效；
      //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
      type: "合同专用",
      // 允许上传的文件个数  默认值为1
      // eg: 1 表示只允许上传1个文件；
      //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
      size: 1,
      // 上传的单个文件大小 单位为 MB  默认值为1
      //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
      //        当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
      singleFileSize: 100,
    },
  }
}

export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'BusinessTermination',
  // components: {AgreeContractZj},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据
    return {
      currentSide:0,
      btType:'',
      UpLoadFileConfig:{
        config:upLoadConfig(),
        extendedFileVerification,
        value:{}
      }
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 方法集合
  methods: {
    onChange(a, b, c){console.log(a, b, c);},
    gotoSide(num){
      let num_ = num
      if(!this.isType.isNumber(num)){
        num_ = this.btType
      }
      if(!this.isType.isNumber(num_)){
        this.$message.warning('请选择上传通知函或业务解除协议');
        return false
      }
      this.currentSide = num_
      console.log('goto===>',num_,this.btType,num);
      this.$refs['bt-carousel'].goTo(num_, true)
      this.btType = ''
    },
    setValue(param){
      console.log('返回的结果====》',param);
    }
  },
  }
</script>
<style lang='less' >
.bt-con{
  width: 100%;
  .radio-group-con{
    display: flex !important;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    height: 200px;
    padding: 30px;
  }
  // height: 500px;
  // .ant-carousel{
  //   width: 100%;
  //   height: 100%;
  //   .slick-slider{
  //     width: 100%;
  //     height: 100%;
  //   }
  // }
  // .ant-carousel .slick-slide {
  //   text-align: center;
  //   height: 100%;
  //   // line-height: 160px;
  //   background: #364d79;
  //   overflow: hidden;
  // }

  // .ant-carousel .slick-slide h3 {
  //   color: #fff;
  // }
}
</style>

